
<style lang="scss" scoped>
.container {
  width: 100%;
  margin-top: 60px;
  border-top: 1px solid #e5e5e5;  
}
#eval {
    padding: 15px 15px 0 15px;
    background: #fff;
}

.evalBox {
    width: 100%;
    height: auto;
    position: relative;
}

.evalBox img {
    width: 94px;
    height: 94px;
    display: block;
    margin-right: 15px;
}

.evalBox>div>span {
    font-size: 14px;
    margin-right: 10px;
}

.textarea {
    margin-top: 15px;
    position: relative;
    overflow: hidden;
}

.textarea textarea {
    width: 100%;
    resize: none;
    border: none;
    line-height: 25px;
    outline: none;
    min-height: 160px;
    font-size: 14px;
    overflow-y: visible;
    display: inline-block;
    border-radius: 3px;
    padding: 15px;
    box-sizing: border-box;
    background: rgba(250, 250, 250, 1);
}

.release-img {
    width: 100%;
    margin-top: 15px;
    box-sizing: border-box;
}

.release-img>.img-box {
    width: 30%;
    height: 80px;
    max-height: 100px;
    margin: 0 1%;
    float: left;
    position: relative;
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
}

.img-box img {
    width: 100%;
    height: 100%;
    display: block;
}

.release-upload {
    width: 30%;
    height: 75px;
    margin: 0 1%;
    margin-bottom: 10px;
    background: rgba(243, 243, 243, 1);
}

.release-upload img {
    width: 25px;
    height: 25px;
    display: block;
    margin-bottom: 8px;
}

.release-txt {
    margin-top: 20px;
}

.release-txt span {
    display: inline-block;
    border-radius: 30px;
    padding: 5px 20px;
    background: #f0f0f0;
    font-size: 12px;
    margin-right: 10px;
}

.active {
    color: #ff0000;
}

.img-box__delete {
    width: 22px;
    height: 22px;
    position: absolute;
    right: -8px;
    top: -10px;
    background: url("/static/ethel_img/shop/release_icon_delete@2x.png") center center no-repeat;
    background-size: 100%;
}

.phone-box {
    width: 100%;
    height: 55px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
    padding: 5px 0px;
    margin-top: 10px;
}

.phone-box span {
    display: inline-block;
    width: 80px;
    line-height: 45px;
    border-right: 1px solid #e5e5e5;
}

.phone-box input {
    padding-left: 10px;
    font-size: 13px;
    height: 100%;
    outline: none;
}
.btn {
  width: 90%;
  height: 45px;
  position: relative;
  margin: 0 auto;
  line-height: 45px;
  border: none;
  outline: none;
  display: block;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 16px;
}


</style>
<template>
  <div class="withdrawal">
    <ComHeader title="评价" leftArrow="true"/>
    <div class="container">
      <div id="eval">
        <div class="evalBox flex-display flex-center-pack flex-center-align">
          <img :src="photo" id="proIcon">
          <div class="flex-num-one flex-row-start">
            <span>评分</span>
            <fieldset class="starability-growRotate" id="fieldset">
              <input
                type="radio"
                id="rate5-4"
                name="rating"
                value="5"
                @change="fnSelectStar(5)"
              >
              <label for="rate5-4" title="Amazing"  >5 stars</label>
              <input
                type="radio"
                id="rate4-4"
                name="rating"
                value="4"
                @change="fnSelectStar(4)"
              >
              <label for="rate4-4" title="Very good">4 stars</label>
              <input
                type="radio"
                id="rate3-4"
                name="rating"
                value="3"
                @change="fnSelectStar(3)"
              >
              <label for="rate3-4" title="Average" >3 stars</label>
              <input
                type="radio"
                id="rate2-4"
                name="rating"
                value="2"
                @change="fnSelectStar(2)"
              >
              <label for="rate2-4" title="Not good">2 stars</label>
              <input
                type="radio"
                id="rate1-4"
                name="rating"
                value="1"
                @change="fnSelectStar(1)"
              >
              <label for="rate1-4" title="Terrible" >1 star</label>
            </fieldset>
          </div>
        </div>
        <div class="textarea">
          <textarea placeholder="分享你的购物心得吧~" id="textarea" @input="fnChangeValue($event)" v-model="value"></textarea>
        </div>
        <div class="release-num flex-display flex-right-pack">
          <span id="areaCount">{{value.length}}</span>/200
        </div>
        <!-- <div class="flex-display flex-center-align flex-warp release-img" id="release-img">
          <div
            class="release-upload flex-display flex-display-column flex-center-pack flex-center-align"
            tapmode
            onclick="fnUploadImage()"
            id="release-upload"
          >
            <img src="/static/ethel_img/shop/release_icon_picture@2x.png">
            <span class="f-12">添加图片</span>
          </div>
        </div> -->
      </div>
    </div>
    <button class="btn theme-background" @click="fnSubmit">确定</button>
  </div>
</template>
<script>
import api from "@/fetch/api";
import ComHeader from "@/common/ComHeader";
import Scroll from "@/base/scroll/scroll";
import Loading from "@/base/loading/loading";
import axios from "axios";
import { Toast, Indicator} from "mint-ui";
export default {
  data() {
    return {
      starNum: 0,
      value: '', // 值
      photo: this.$route.query.photo

    };
  },
  created() {
    console.log(this.$route.query)
  },
  methods: {
    fnSelectStar(_num) {
      this.starNum = _num
    },
    fnChangeValue(_this) {
      if(_this.target.value.length > 200) {
        this.value = _this.target.value.substring(0, 200)
      }
    },
    fnSubmit() {
      var str = !this.starNum ? '请选择星级评分' : !this.value ? '请填写购物心得' : ''
      if(str) {
        Toast({
          message: str,
          position: "middle",
          duration: 2000
        });
        return
      }
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      let params = {
        content: this.value,
        star_level: this.starNum,
        comment_type: 0,
        is_order: 'yes',
        order_no: this.$route.query.order_no,
        uid: this.getUId()
      }
      api.setGoodscomment(1,params).catch(res => {
        Indicator.close()
        console.log(res)
        if(res.status == 200 && res.data.code == 0) {
          Toast({
            message: '评价成功',
            position: "middle",
            duration: 2000
          });
          setTimeout(() => {
            this.$router.go(-1)
          }, 2000)
        }
      }).then(err => {
        Indicator.close()
      })
      
    }
    
  },
  components: {
    Scroll,
    ComHeader,
    Loading,
    Toast,
    Indicator
  }
  
};
</script>



